<template>
  <view class="my-cardinfo">
    <view class="my-cardinfo-container">
      <view class="left-box">
        <image
          src="@/static/03.png"
          mode="scaleToFill"
          style="width: 96rpx; height: 96rpx"
      /></view>
      <view class="right-box">
        <view class="title">
          <text class="title-name">白白静</text>
          <text class="title-job">省内知名专家</text>
        </view>
        <view class="sub-title">医生专业:肥胖 糖尿病</view>
        <view class="detail"
          >主任医师 副教授
          医学博士，硕士生导师，中华医学会内科学分会青年委员，河南省医学信息学会代谢性
          >></view
        >
        <view class="image-box">
          <image
            src="@/static/04.png"
            mode="scaleToFill"
            style="width: 48rpx; height: 48rpx"
          />
          <image
            src="@/static/05.png"
            mode="scaleToFill"
            style="width: 48rpx; height: 48rpx"
          />
          <image
            src="@/static/06.png"
            mode="scaleToFill"
            style="width: 48rpx; height: 48rpx"
          />
        </view>
      </view>
    </view>
    <view class="my-cardinfo-arrow">
      <tui-list-cell unlined padding="32rpx 30rpx" arrow :arrowRight="30">
        <view
          class="default"
          style="display: flex; justify-content: space-between"
        >
          <view class="title">8-21（周三）上午</view>
          <view class="isTrue" style="padding-right: 40rpx">有号</view>
        </view>
      </tui-list-cell>
    </view>
  </view>
</template>

<script lang="js" setup></script>

<style scoped lang="scss">
.my-cardinfo {
  // height: 338rpx;
  background-color: #fff;
  padding-top: 32rpx;
  &-container {
    margin: 0 30rpx;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: flex-start;

    .right-box {
      font-weight: 400;
      padding-left: 16rpx;
      position: relative;
      .image-box {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
      }
      .title-name {
        font-size: 32rpx;
        color: #333333;
      }
      .title-job {
        font-size: 28rpx;
        color: #666666;
        padding-left: 16rpx;
      }
      .sub-title {
        color: #666666;
        font-size: 28rpx;
        padding-top: 8rpx;
      }
      .detail {
        padding-top: 16rpx;
        color: #999999;
        font-size: 24rpx;
        padding-bottom: 32rpx;
      }
    }
  }
}
</style>
